import "./index.less"
import ControlPanel from  './ControlPanel/index.tsx'
import BarGraph from "./BarGraph";
import AntG6 from "./AntvG6";
import {useEffect} from "react";
import {getAllData} from "../api/request.ts";
import useAppState from "../store";
import SimilarTable from "./SimilarTable";
import RadarGraph from "./RadarGraph";
import CalendarGraph from "./CalendarGraph";
import {Spin} from "antd";


const AppIndex=()=>{
    const {graphData,setGraphData,setTensileStrength,setYieldStrength,getState,spinning,setSpinning}=useAppState();
    // 定义异步函数
    const fetchData = async () => {
        try {
            setSpinning(true);
            // 发送请求并等待响应
            const {data} = await getAllData();
            // 更新状态
            setGraphData({
                nodes: data.nodes,
                edges: data.edges
            });
            setTensileStrength(data.Tensile_Strength);
            setYieldStrength(data.Yield_Strength);
            setSpinning(false);
            console.log("所有数据",data);
        } catch (error) {
            console.error("请求失败:", error);
        }
    };
    useEffect( () => {
        // 执行异步函数
        fetchData();
    }, []);
    return (
        <>
            <div className={"MaterialVis"}>
                <div className={"ControlPanelBox"}><ControlPanel></ControlPanel></div>
                <div className={"DataOverviewBox"}>
                    <div className={"LeftDataOverviewBox"}>
                        <AntG6></AntG6>
                        <SimilarTable></SimilarTable>
                    </div>
                    <div className={"RightDataOverviewBox"}>
                        <CalendarGraph></CalendarGraph>
                        <RadarGraph></RadarGraph>
                        <BarGraph></BarGraph>
                    </div>
                </div>
            </div>
            <Spin tip="Loading..." fullscreen size={"large"} spinning={spinning}>
            </Spin>
        </>
    )
};

export  default  AppIndex;

